<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/cdp.css">
  <link rel="stylesheet" href="./lib/font-awesome/css/font-awesome.css">
</head>

<body>
  <!-- 头部 -->
  <div class="header" id="top">
    <header>
      <div class="back">
        <a href="./index.html" class="fa fa-angle-left"></a>
      </div>
      <div class="title">凑单品</div>
    </header>
  </div>

  <!-- 主要内容 -->
  <div class="coudan-box">
    <div class="list">
      <!-- 头部导航 -->
      <div class="hd">
        <div class="filter">
          <ul>
            <li>
              <a href="javascript:;" class="navList">
                京东
                <span class="fa fa-caret-down"></span>
                <span class="fa fa-caret-up on"></span>
              </a>
              <!-- 京东 -->
              <div class=" popbox">
                <ul class="shop">
                </ul>
              </div>
            </li>
            <li>
              <a href="javascript:;" class="navList">
                华北
                <span class="fa fa-caret-down"></span>
                <span class="fa fa-caret-up"></span>
              </a>
              <!-- 华北 -->
              <div class=" popbox">
                <ul class="area">
                </ul>
              </div>
            </li>
            <li>
              <a href="javascript:;" class="navList">
                1元
                <span class="fa fa-caret-down"></span>
                <span class="fa fa-caret-up"></span>
              </a>
              <!-- 1元 -->
              <div class="popbox">
                <ul>
                  <li class="goods">
                    <a href="javascript:;">全部价格</a>
                    <span class="fa fa-check"></span>
                  </li>
                  <li class="goods">
                    <a href="javascript:;">1-3元</a>
                    <span class="fa fa-check"></span>
                  </li>
                  <li class="goods">
                    <a href="javascript:;">3-5元</a>
                    <span class="fa fa-check"></span>
                  </li>
                  <li class="goods">
                    <a href="javascript:;">5-10元</a>
                    <span class="fa fa-check"></span>
                  </li>
                  <li class="goods">
                    <a href="javascript:;">10-15元</a>
                    <span class="fa fa-check"></span>
                  </li>
                  <li class="goods">
                    <a href="javascript:;">15元以上</a>
                    <span class="fa fa-check"></span>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <div class="search">
          <span class="fa fa-list-ul"></span>
          <span class="fa fa-close"></span>
        </div>
        <!-- 各种下拉 -->
        <!-- 图标搜索 -->
        <div class="popsearch popbox ">
          <!-- 搜索框 -->
          <div class="ormsch">
            <div class="txt">
              <span class="fa fa-search"></span>
              <input type="text" placeholder="搜索你想要的凑单品">
            </div>
            <div class="smt">
              <input type="button" value="搜索">
            </div>
          </div>
          <!-- 排序 -->
          <div class="select ui-border-b">
            <div class="title">排序</div>
            <div class="main_sort">
              <div>
                <a href="javascript:;">销量</a>
              </div>
              <div>
                <a href="javascript:;">价格↑</a>
              </div>
              <div>
                <a href="javascript:;">价格↓</a>
              </div>
            </div>
          </div>
          <!-- 分类 -->
          <div class="select">
            <div class="title">分类</div>
            <div class="main_sort">
              <div>
                <a href="javascript:;">全部</a>
              </div>
              <div>
                <a href="javascript:;">家居</a>
              </div>
              <div>
                <a href="javascript:;">数码</a>
              </div>
              <div>
                <a href="javascript:;">办公</a>
              </div>
              <div>
                <a href="javascript:;">个护</a>
              </div>
              <div>
                <a href="javascript:;">食品</a>
              </div>
              <div>
                <a href="javascript:;">母婴</a>
              </div>
              <div>
                <a href="javascript:;">饰品</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品信息 -->
      <div class="bd">

      </div>
    </div>
  </div>
</body>

</html>
<script src="./lib/zepto/zepto.js"></script>
<script src="./lib/arttemplate/template-web.js"></script>
<script src="./js/fastclick.js"></script>
<script src="./js/cdp.js"></script>
<script type="text/template" id="shopTmp">
  {{each data val}}
  <li class="goods" title="{{val.shopId}}">
    <a href="javascript:;">{{val.shopName}}</a>
    <!-- fa fa-check -->
    <span class="fa fa-check"></span>
  </li>
  {{/each}}
</script>
<script type="text/template" id="areaTmp">
  {{each arr val}}
  <li class="goods" title="area:{{val.shopId}}">
    <a href="javascript:;">{{val.areaName}}</a>
    <span class="fa fa-check"></span>
  </li>
  {{/each}}
</script>

<script type="text/template" id="goodInfo">
  {{each data val}}
  <a href="javascript:;">
    <img src="{{val.productImg}}" alt="">
    <div>
      <p>{{val.productName}}</p>
      <p>{{val.productPrice}}</p>
    </div>
  </a>
  {{/each}}
</script>